<template>
	<wsPage title="系统消息列表">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="时间区间">
						<Row>
		                <Col span="11">
		                    <FormItem prop="date">
		                        <DatePicker type="date" placeholder="开始时间" v-model="queryForm.searchStartTime" @on-change="handlechange"></DatePicker>
		                    </FormItem>
		                </Col>
		                <Col span="2" style="text-align: center">-</Col>
		                <Col span="11">
		                    <FormItem prop="date">
		                        <DatePicker type="date"  placeholder="结束时间" v-model="queryForm.searchEndTime" @on-change="handlechangend"></DatePicker>
		                    </FormItem>
		                </Col>
		            </Row>      
			       </FormItem>
			        <FormItem label="标题">
						<Input v-model="queryForm.title" placeholder="请输入"></Input>
			        </FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<Button  :disabled="!isTableSelected" @click="batchUpdateStatus">设置已读</Button>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data" @on-selection-change="tableSelected"></Table>
			</div>
		</wsSmPanel>
		<wsModal v-model="smsModal.show" title="系统消息详情"  @on-cancel="cancelModal" @on-ok="cancelModal">
		    <div class="layout-content">
		    	<Row>
		    		<Col span="24" class="layout-content-main">
							<Col span="24">
								<Col span="8">
									标题:
								</Col>
								<Col span="16">
									{{smsModal.form.title}}
								</Col>	 
							</Col>
						</Col>
						<Col span="24" class="layout-content-main">
							<Col span="12">
								<Col span="8"> 
									会员名称:
								</Col>
								<Col span="10">
									{{smsModal.form.memberName}}
								</Col> 
							</Col>
							<Col span="12">
								<Col span="8">
									摘要:
								</Col>
								<Col span="16">
									{{smsModal.form.synopsis}}
								</Col>	 
							</Col>
						</Col>
						<Col span="24" class="layout-content-main">
							<Col span="12">
								<Col span="8">
									读取状态:
								</Col>
								<Col span="8">
									{{smsModal.form.status == 1?'已读':'未读'}}
								</Col> 
							</Col>
							<Col span="12">
								<Col span="8">
									读取时间:
								</Col>
								<Col span="16">
									{{smsModal.form.readDate}}
								</Col>	 
							</Col>
						</Col>
						<Col span="24" class="layout-content-main">
							<Col span="12">
								<Col span="8">
									发送时间:
								</Col>
								<Col span="16">
									{{smsModal.form.createDate}}
								</Col>	 
							</Col>
							<Col span="12">
								<Col span="8">
									消息类型:
								</Col>
								<Col span="8">
									{{smsModal.form.msgType == 1?'订单':'其它'}}
								</Col>	 
							</Col>
					
						</Col>
						
						<Col span="24" class="layout-content-main">
							<Col span="24">
								<Col span="24">
									内容:
								</Col>
								<Col span="24" style="word-wrap: break-word">
									{{smsModal.form.content}}
								</Col> 
							</Col>
						</Col>

					
		    	</Row>
		    </div>			
		</wsModal>

	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				queryForm: {
					searchStartTime: '',
					searchEndTime:'',
					title:''
				},
				table: {
					 columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },{
						title: '标题',
                        key: 'title',
                        width: 600,
                        align: 'center',
						render: (h, params) => {
							return h('div', [h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										let content = params.row.content;
										let title = params.row.title;
										let status = params.row.status;
										let id = params.row.id;
                                		this.jumpToReadPath(content,title,status,id);
									}
								}
							},params.row.title)])
						}
					},
					{
						title: '发送时间',
                        key: 'createDate',
                        align: 'center'
					},{
						title: '消息类型',
                        key: 'msgType',
                        align: 'center',
                        render: (h, params) => {
                        	return h('Tag', {
                        		props: {
                        			type: 'border',
                        			color: params.row.msgType == '1' ? 'blue' : 'yellow'
                        		}
                        	}, params.row.msgType == '1' ? '订单' : '其它')
                        }
					},{
						title: '读取状态',
                        key: 'status',
                        align: 'center',
                        render: (h, params) => {
                        	return h('Tag', {
                        		props: {
                        			type: 'border',
                        			color: params.row.status == '1' ? 'blue' : 'yellow'
                        		}
                        	}, params.row.status == '1' ? '已读' : '未读')
                        }
					}/*,{
						title: '操作',
						width: 180,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
									on: {
										click: () => {
											let rowId = params.row.id;
                                    		this.showModal(rowId);
										}
									}
								}, '详情')
								])
						}
					}*/],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [], //选中
					loading: true
				},
				//详情模态框
				smsModal: {
					show: false,
					form: {
						id:'',
						msgType: '',
						title:'',
						synopsis:'',
						content:'',
						memberName:'',
						status:'',
						readDate:'',
						createDate:''
					}
				}
			}
		},
		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			}	
		},
		mounted() {
			this.init();
		},
		methods: {
			refresh() {
				this.queryForm = {
					searchStartTime: '',
					searchEndTime:'',
					title:''
				};
				this.query();
			},
			handlechange (date) {
                this.queryForm.searchStartTime = date;
            },
            handlechangend(date){
            	this.queryForm.searchEndTime = date;
			},
			init() {
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ops/messageSystemRecords?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 打开详情模态框
			 */
			showModal(rowId){
				this.queryById(rowId);
			},
			/**
			 * 取消弹框1
			 */
			cancelModal() {
				this.smsModal.show = false;
			},
			/**
			 * 根据id查询
			 */
			queryById(rowId){
				const _this = this;
				this.axios.get('/ws/ops/messageSystemRecords/' + rowId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.smsModal.form = res.data;
						_this.smsModal.show = true;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 表格选择变更事件
			 */
			tableSelected(selection_) {
				this.table.selection = selection_;
			},
			/**
			 * 跳转都查看消息具体信息页面
			 */
			jumpToReadPath(content,title,status,id){
				if(null!=title){
					this.$router.push({name:content});
					//单个修改读取状态，如果未读则改为已读
					if(status==0){
						//未读
						this.updateStatus(id);
					}
				}
			},
			updateStatus(id){
				const _this = this;
				_this.axios.put('/ws/ops/messageSystemRecords/' + id).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
					}else{
						_this.$Message.warning('读取失败');
					}
				});
			},
			/**
			 * 批量修改读取状态
			 */
			batchUpdateStatus(){
				let ids = [];
				this.table.selection.forEach((item) => {
			      ids.push(item.id);
			    });
				if(ids.length < 1){
					this.$Message.warning('请选择需要已读的消息记录');
					return;
				}
				const _this = this;
				this.axios.put('/ws/ops/messageSystemRecords/batchUpdateStatus' , ids).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.query();
						_this.loadMessageCount();
						_this.table.selection=[];
					}
			    });	
			},
			//重新查询未读消息数量
			loadMessageCount(){
                this.axios.get("/ws/ops/messageSystemRecords/condition").then(response => {
                    var res = response.data;
                    var resMeta = res.meta;
                    if (0 == resMeta.code) {
                        this.$store.dispatch('authUnReadmessageCount',res.data);
                    }
                });  
            },

		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	.layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 20px;
        float:left;
        justify-content: space-around;
        font-size:14px;
    }
</style>